<template>
	<div class="container">
		<v-warningToolBar :fullPath="postData.opera" :tableColumns="tableColumns" @changeLie="getChangeLie"
			@getSearchIPArr="getToolBarSearchIPArr" @getSearchIP="getToolBarSearchIP" @selectLevel="getSelectLevel"
			@selectNodeType="getselectNodeType" @sureDialogOpen="sureDialogOpen" :tableData="tableDataFn"
			:tableDataFields="tableDataFieldsFn">
		</v-warningToolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableDataFn" border stripe style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="50" label="序号"> </el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :sortable="item.sortable" :label="item.label" :width="item.width"
					v-if="item.isShow" :key="item.prop" align="center">
					<template v-slot="scope">
						<template v-if="item.format == 'level'">
							<div style="text-align: center">
								<el-tag :type="scope.row.levelType" disable-transitions effect="dark">
									{{ scope.row[item.prop] }}
								</el-tag>
							</div>
						</template>
						<template v-else-if="item.format == 'action'">
							<div style="text-align: center">
								<el-button type="info" size="medium" plain @click="dialogVisible = true">查看</el-button>
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
		<v-Dialog :dialogVisible="dialogVisible" @dialogClose="dialogClose" :dialogData="dialogData"></v-Dialog>
		<v-SureWarningdialog :multipleSelection="multipleSelection" :sureWarningdialogVisible="sureWarningdialogVisible"
			@sureDialogClose="sureDialogClose"></v-SureWarningdialog>
	</div>
</template>

<script>
	import {
		getWarnningPanelSSGJ
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import vPagination from "common/Pagination.vue";
	import tableColumns from "./WarningTableColumns.js";
	import vWarningToolBar from "./WarningToolBar.vue";
	import vDialog from "./solveDialog";
	import moment from "moment";
	import vSureWarningdialog from "./sureWarningDialog.vue"

	export default {
		name: "warningPanel",
		components: {
			vPagination,
			vWarningToolBar,
			vDialog,
			vSureWarningdialog
		},
		data() {
			return {
				postData: {
					opera: "alertlist",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						ip: "",
						ALERT_LEVEL: "",
						// "monid": "9B86A82E27A3473F9D0F1DF46C9A6790",
					},
				},
				tableData: [],
				dataTotal: 0,
				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: this.$route.params.IP ? this.$route.params.IP : "",
				selectLevel: this.$route.params.level ? this.$route.params.level : "",
				selectNodeType: this.$route.params.nodeType ?
					this.$route.params.nodeType :
					"alertlist",
				handLevel: "",
				loading: true,
				dialogVisible: false,
				dialogData: "",
				multipleSelection: [],
				sureWarningdialogVisible: false,
			};
		},
		created() {
			this.initGetTableData();
		},
		computed: {
			tableDataFn() {
				return this.tableData.filter((item) => {
					switch (item.ALERT_LEVEL) {
						case 1:
							item.ALERT_LEVEL = "提醒";
							item.levelType = "info";
							break;
						case 2:
							item.ALERT_LEVEL = "普通";
							item.levelType = "warning";
							break;
						case 3:
							item.ALERT_LEVEL = "紧急";
							item.levelType = "danger";
							break;

						default:
							break;
					}

					return item;
				});
			},
			tableDataFieldsFn() {
				let _jsonfields = {};
				this.tableColumns.filter((item) => {
					if (item.isShow) {
						_jsonfields[item.label] = item.prop;
					}
				});

				return _jsonfields;
			},
		},
		methods: {
			initGetTableData() {
				this.selectLevel == "" ?
					this.$set(this.postData.filters, "ALERT_LEVEL", '') :
					this.$set(this.postData.filters, "ALERT_LEVEL", this.selectLevel);
				this.selectLevel == "" ?
					this.$set(this.postData.filters, "ip", '') :
					this.$set(this.postData.filters, "ip", this.SearchIP);

				if (this.selectNodeType != "alertlist") {
					this.postData.opera = this.selectNodeType;
				}
				this.getTableData();
			},
			getTableData() {
				this.loading = true;


				let ip = this.postData.filters.ip;
				let alertLevel = this.postData.filters.ALERT_LEVEL;
				let pageNum = this.postData.curPage;
				let pageSize = this.postData.pageSize;
				getWarnningPanelSSGJ({
						ip,
						alertLevel,
						pageNum,
						pageSize
					})
					.then((res) => {
						let filterRes = [];
						this.dataTotal = Number(Object.keys(res)[0])
						if (!Object.values(res)[0]) {
							this.loading = false;
							this.tableData = []
						}
						//  console.log(Object.keys(res)[0])

						Object.values(res)[0].forEach((item) => {
							filterRes.push({
								IP: item.ip,
								MONID: item.monid,
								SYSTEMNAME: item.osType ? item.osType : item.dbtype,
								ALERT_LEVEL: item.alertLevel,
								INFOTYPE: item.infotype,
								ALERTINFO: item.alertinfo,
								RECORD_TIME: moment(item.recordTime).format("YYYY-MM-DD HH:mm:ss"),
								MON_OBJECT: item.monObject,
								SERVICESNAME: item.servicesname,
								systemname: item.systemname
							});
						});
						this.tableData = filterRes;

						this.loading = false;
					})
					.catch((_) => {}).finally(() => {
						this.loading = false;
					});;
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;

				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				this.SearchIP == "" ?
					this.$set(this.postData.filters, "ip", '') :
					this.$set(this.postData.filters, "ip", this.SearchIP);

				this.getTableData();
			},
			// 未实现
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				// this.SearchIPArr = arr;
				// this.postData.curPage = 1;
				// if (this.SearchIPArr.length > 0) {
				//     this.postData.filters['ip'] = this.SearchIPArr;
				// } else {
				//     this.postData.filters['ip'] = [];
				// }
				// this.getTableData();
			},
			getSelectLevel(num) {
				// 获取选择级别关键字
				this.selectLevel = num;
				this.postData.curPage = 1;
				this.selectLevel == "" ?
					this.$delete(this.postData.filters, "ALERT_LEVEL") :
					this.$set(this.postData.filters, "ALERT_LEVEL", this.selectLevel);

				this.getTableData();
			},
			getselectNodeType(nodeType) {
				this.selectNodeType = nodeType;
				this.postData.opera = this.selectNodeType;

				this.getTableData();
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			dialogClose() {
				(this.dialogVisible = false), (this.dialogData = "");
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			sureDialogClose() {
				this.multipleSelection = []
				this.sureWarningdialogVisible = false;
				this.getTableData()
			},
			sureDialogOpen() {
				if (this.multipleSelection.length < 1) {
					this.$message.error('请选择告警')
				} else {
					this.multipleSelections = this.multipleSelection
					this.sureWarningdialogVisible = true
				}
			}
		},
		watch: {},
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-button--mini,
	.el-button--small {
		font-size: 16px;
	}
</style>